<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color:red">Count组件的求和为：{{ sum }}</h3>

    <input type="text" placeholder="请输入名字" v-model="name">
    <button @click="add">添加</button>
    <ul>
      <li v-for="person in personList" :key="person.name">{{ person.name }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Person",
  data() {
    return {
      name: ''
    }
  },
  computed: {
    personList() {
      return this.$store.state.personList
    },
    sum() {
      return this.$store.state.sum
    }
  },
  methods: {
    add() {
      const personObj = { id: Math.random().toString(36), name: this.name }
      console.log(personObj)
      this.$store.commit('ADD_PERSON', personObj)
      this.name = ''
    }
  }

};
</script>

<style>
bottom {
  margin-left: 5px;
}
</style>
